<template>
  <div style="margin: 0 auto;">
    <div class="item-cards">
      <item-card
        v-for="(item, index) in data"
        :key="index"
        :url="item.image"
        :price="item.price"
        :commodityId="item.commodityId"
        :name="item.name"
      ></item-card>
    </div>
    <el-pagination
      :page-size="pageSize"
      :page-sizes="[10, 20, 30, 40, 50]"
      background
      layout="sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="display: flex; justify-content: right; --el-color-primary: #3271ae; margin-top: 20px;"
    />
  </div>
</template>
  
  <script>
import ItemCardVue from "@/components/search/ItemCard.vue";
import { commodityAll } from "@/api/commodity.js";

export default {
  components: { ItemCard: ItemCardVue },
  props: {
    data: Array,
    wordKey: String,
    orderBy: Number,
    type: Number,
  },
  watch: {
    orderBy(oldValue, newValue) {
      this.all();
    },
    type(oldValue, newValue) {
      this.all();
    },
  },
  data() {
    return {
      page: 0,
      pageSize: 10,
      data: [],
      total: 0,
    };
  },
  methods: {
    all() {
      commodityAll(
        this.page,
        this.pageSize,
        this.wordKey,
        this.orderBy,
        this.type
      ).then((res) => {
        this.data = res.list;
        this.total = res.total;
      });
    },

    handleSizeChange(val) {
      this.pageSize = val;
      this.all();
    },
    handleCurrentChange(val) {
      this.page = val - 1;
      this.all();
    },
  },
  created() {
    this.all();
  },
};
</script>

<style scoped>
.item-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
</style>